@import url('https://fonts.googleapis.com/css2?family=Galmuri11&display=swap');

:root {
  --page:#101622;
  --app:#141d2a;
  --surface:#1c2635;
  --surface-2:#243244;
  --surface-3:#192433;
  --line:#39485d;
  --line-soft:#2f3d50;
  --text:#f3ecd8;
  --muted:#b6bdaf;
  --cream:#ead8ab;
  --teal:#78bdae;
  --sage:#a4b987;
  --amber:#d1a05b;
  --rose:#c87974;
  --pixel:"Galmuri11", "Apple SD Gothic Neo", system-ui, sans-serif;
}

* { box-sizing:border-box; }
html, body { min-height:100%; }
body { margin:0; color:var(--text); font-family:var(--pixel); background:var(--page); overflow:hidden; }
button, input, select { font:inherit; }
button { cursor:pointer; }

.site-shell { min-height:100vh; display:block; padding:0; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.hidden { display:none!important; }

.phone {
  position:relative;
  width:100vw;
  height:100vh;
  overflow:hidden;
  padding:22px 28px 28px;
  border:0;
  border-radius:0;
  background:
    radial-gradient(circle at 14% 18%, rgba(120,189,174,.08), transparent 34%),
    radial-gradient(circle at 86% 12%, rgba(209,160,91,.06), transparent 30%),
    var(--app);
}
.phone::before, .crt-glow, .scanlines { display:none; }

.hud-panel {
  display:grid;
  grid-template-columns:52px minmax(126px,.42fr) minmax(360px,1fr) auto;
  align-items:center;
  gap:14px;
  max-width:1180px;
  margin:0 auto;
  padding:12px;
  border:1px solid var(--line-soft);
  border-radius:18px;
  background:rgba(28,38,53,.92);
}
.pixel-icon, .pixel-chip { border:1px solid var(--line); border-radius:14px; background:var(--surface-2); color:var(--cream); }
.pixel-icon { width:52px; height:52px; padding:4px; }
.pixel-icon img { width:100%; height:100%; object-fit:cover; display:block; border-radius:10px; }
.hud-title p { margin:0 0 5px; color:var(--teal); font-size:11px; letter-spacing:.04em; }
.hud-title h2 { margin:0; color:var(--text); font-size:24px; letter-spacing:-.04em; }
.pixel-chip { padding:8px 12px; font-size:12px; text-align:center; }
.pixel-chip span { display:block; margin-bottom:3px; color:var(--amber); font-size:10px; }

.tabbar { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:6px; border:1px solid var(--line-soft); border-radius:16px; background:rgba(36,50,68,.78); }
.tabbar button { min-height:42px; display:flex; align-items:center; justify-content:center; gap:6px; padding:0 12px; border:0; border-radius:12px; background:transparent; color:var(--muted); font-weight:900; }
.tabbar button span { font-size:16px; line-height:1; }
.tabbar button.active { color:#10251f; background:var(--teal); }

.screen { display:none; max-width:1180px; height:calc(100vh - 122px); margin:0 auto; overflow-y:auto; padding:18px 0 30px; scrollbar-color:var(--line) transparent; }
.screen.active { display:block; }
.screen[data-screen="home"].active {
  display:grid;
  grid-template-columns:minmax(520px, 1.1fr) minmax(360px, .9fr);
  grid-template-areas:
    "title title"
    "goal status"
    "goal rooms"
    "goal next"
    "insights insights";
  gap:16px;
  align-content:start;
}

.neon-card, .content-card, .blog-option, .overlay, .room, .mission-grid button, .answer, .next-action, .progress-strip, .weekly-panel, .goal-form {
  border:1px solid var(--line-soft);
  border-radius:18px;
  background:rgba(28,38,53,.96);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
}
.label { margin:0; color:var(--teal); font-size:11px; letter-spacing:.06em; }

.screen-title { grid-area:title; display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0; padding:13px 14px; border:1px solid var(--line-soft); border-radius:18px; background:rgba(28,38,53,.92); }
.screen-title h3 { margin:3px 0 0; color:var(--text); font-size:19px; line-height:1.25; }
.assist-chip { flex:0 0 auto; min-height:40px; padding:8px 12px; border:1px solid rgba(209,160,91,.75); border-radius:999px; background:rgba(209,160,91,.10); color:var(--cream); font-size:12px; font-weight:800; }
.assist-chip.static { display:inline-grid; place-items:center; }

.progress-strip { grid-area:status; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:12px; align-self:start; }
.progress-strip span { color:var(--muted); font-size:10px; }
.progress-strip b { display:block; margin-top:4px; color:var(--text); font-size:14px; }
.green { color:var(--sage)!important; }

.timer-card { grid-area:goal; display:grid; grid-template-rows:minmax(220px, 48%) 1fr; gap:0; min-height:560px; overflow:hidden; border-color:rgba(120,189,174,.48); }
.home-feature { width:100%; height:100%; max-height:320px; object-fit:cover; object-position:center; display:block; filter:saturate(.84) contrast(.98) brightness(.92); }
.goal-content { display:grid; grid-template-columns:156px minmax(0,1fr); gap:20px; align-items:center; padding:22px; }
.timer-ring { position:relative; width:148px; height:148px; display:grid; place-items:center; justify-self:center; }
.timer-ring svg { position:absolute; inset:0; transform:rotate(-90deg); }
.timer-bg, .timer-progress { fill:none; stroke-width:12; }
.timer-bg { stroke:#38485e; }
.timer-progress { stroke:var(--sage); stroke-dasharray:291.5 364.4; stroke-linecap:round; }
.timer-core { width:96px; height:96px; display:grid; place-items:center; border:1px solid var(--line); border-radius:20px; background:var(--surface-2); }
.timer-core strong { color:var(--cream); font-size:32px; line-height:1; }
.timer-core span { margin-top:-28px; color:var(--muted); font-size:10px; }
.timer-core::after { content:"사용"; margin-top:-26px; color:var(--muted); font-size:11px; }
.timer-copy { min-width:0; }
.timer-copy h3 { margin:8px 0; color:var(--cream); font-size:28px; line-height:1.2; }
.timer-copy p:last-child { max-width:440px; margin:0; color:var(--muted); font-size:15px; line-height:1.6; }
.primary-cta { width:100%; max-width:320px; min-height:48px; margin-top:16px; border:0; border-radius:14px; background:var(--teal); color:#10251f; font-size:15px; font-weight:900; text-align:center; }

.rooms { grid-area:rooms; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; overflow:visible; margin:0; padding:0; align-self:start; }
.room { min-height:126px; padding:13px; color:var(--text); text-align:left; }
.room small { color:var(--teal); font-size:10px; }
.room b { display:block; margin:7px 0 5px; color:var(--cream); font-size:17px; line-height:1.15; }
.room span { color:var(--muted); font-size:13px; line-height:1.3; }
.room em { display:block; margin-top:8px; color:var(--amber); font-size:12px; font-style:normal; font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.room.active { border-color:rgba(120,189,174,.85); background:#243244; }
.room.add b { color:var(--amber); font-size:28px; }

.next-action { grid-area:next; display:grid; grid-template-columns:1fr 76px; align-items:center; gap:10px; padding:13px; border-color:rgba(164,185,135,.62); align-self:end; }
.next-action b { display:block; margin:5px 0 3px; color:var(--cream); font-size:16px; }
.next-action span { color:var(--muted); font-size:13px; }
.next-action button { min-height:44px; border:0; border-radius:14px; background:var(--sage); color:#172414; font-weight:900; }

.insight-grid { grid-area:insights; display:grid; grid-template-columns:1.2fr .8fr; gap:16px; min-height:190px; }
.weekly-panel, .goal-form { padding:16px; }
.panel-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:12px; }
.panel-head b { color:var(--cream); font-size:18px; }
.bar-row { display:grid; grid-template-columns:54px 1fr 42px; align-items:center; gap:10px; margin:9px 0; color:var(--muted); font-size:13px; }
.bar-row i { display:block; height:10px; border-radius:999px; background:linear-gradient(90deg, var(--teal), var(--sage)); width:var(--h); min-width:24px; }
.bar-row.active { color:var(--cream); }
.goal-form label { display:grid; grid-template-columns:96px 1fr; gap:10px; align-items:center; color:var(--muted); margin:10px 0; }
.goal-form input, .goal-form select { width:100%; min-height:38px; padding:8px 10px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); color:var(--text); }

.theme-row { display:grid; grid-template-columns:repeat(6, minmax(76px,1fr)); gap:8px; margin-bottom:14px; }
.theme-row button { min-height:40px; border:1px solid var(--line-soft); border-radius:999px; background:var(--surface); color:var(--muted); }
.theme-row .active { color:#10251f; background:var(--teal); border-color:var(--teal); font-weight:900; }
.content-list { display:grid; grid-template-columns:repeat(4, minmax(190px,1fr)); gap:14px; }
.blog-select { display:grid; grid-template-columns:repeat(3, minmax(220px,1fr)); gap:14px; }
.content-card, .blog-option { width:100%; color:var(--text); text-align:left; padding:10px; }
.content-card img, .blog-option img, .blog-article img { width:100%; aspect-ratio:16/9; object-fit:cover; object-position:center; display:block; margin-bottom:10px; border-radius:14px; filter:saturate(.86) contrast(.98) brightness(.93); }
.content-card b, .blog-option b { display:block; margin-bottom:5px; color:var(--cream); font-size:17px; }
.content-card span, .blog-option span { color:var(--muted); font-size:13px; }
.content-card em { display:inline-flex; margin-top:9px; padding:7px 9px; border-radius:999px; background:rgba(120,189,174,.12); color:var(--teal); font-style:normal; font-size:12px; font-weight:800; }
.blog-option.active { border-color:rgba(120,189,174,.78); }
.blog-article { max-width:820px; margin:0 auto; }
.blog-article h3, .overlay h3 { margin:0 0 14px; color:var(--cream); line-height:1.35; }
.blog-article p, .helper-copy { color:var(--muted); line-height:1.65; font-size:14px; }
.hashtags { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
.hashtags span { padding:7px 8px; border-radius:999px; background:rgba(120,189,174,.12); color:var(--teal); }
.back-link, .close { margin-bottom:12px; padding:8px 10px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); color:var(--text); }

.overlay { position:absolute; inset:96px max(28px, calc((100vw - 1120px) / 2 + 28px)) 96px; z-index:5; overflow:auto; padding:18px; color:var(--text); background:var(--surface); border-color:var(--line); }
.close { float:right; font-size:22px; line-height:1; }
.rank { width:100%; display:grid; grid-template-columns:34px 1fr auto; gap:10px; align-items:center; margin:8px 0; padding:12px; color:var(--text); background:var(--surface-2); border:1px solid var(--line-soft); border-radius:14px; text-align:left; }
.rank span { display:grid; place-items:center; width:28px; height:28px; border-radius:10px; background:rgba(120,189,174,.12); color:var(--teal); }
.rank.danger { border-color:rgba(200,121,116,.65); }
.rank em { color:var(--muted); font-style:normal; font-size:12px; }
.friend-profile, .settings-profile { display:grid; grid-template-columns:76px 1fr; gap:12px; align-items:center; margin:12px 0 18px; }
.friend-profile img, .settings-profile img, .reward-art { width:100%; aspect-ratio:1; object-fit:cover; border-radius:16px; filter:saturate(.86) brightness(.94); }
.reward-art { width:118px; margin:4px auto 14px; display:block; }
.friend-profile span { display:block; color:var(--muted); margin-top:6px; }
.mission-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.mission-grid button, .answer { color:var(--text); padding:13px 10px; min-height:44px; }
.mission-grid-extended .cat-mission { grid-column:1 / -1; background:rgba(209,160,91,.12); color:var(--cream); font-weight:900; }
.answer { width:100%; margin:8px 0; text-align:left; }
.answer.correct { border-color:rgba(164,185,135,.75); }
.overlay label { display:grid; gap:7px; color:var(--muted); margin:12px 0; }
.overlay input, .overlay select { width:100%; padding:10px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); color:var(--text); }
.reward-score { margin:12px 0; padding:14px; border:1px solid rgba(209,160,91,.65); border-radius:16px; background:rgba(209,160,91,.08); }
.reward-score b { display:block; margin-top:8px; color:var(--cream); font-size:24px; }
.toggle { display:flex!important; justify-content:space-between; align-items:center; }
.toggle input { width:auto; transform:scale(1.25); }

.target-phone { position:relative; margin:12px 0 14px; padding:14px; min-height:320px; border:1px solid var(--line); border-radius:22px; background:var(--app); overflow:hidden; text-align:center; }
.target-top { display:inline-flex; padding:7px 10px; border-radius:999px; color:var(--muted); background:var(--surface-2); font-size:12px; margin-bottom:12px; }
.yawn-cat { width:min(210px, 82%); aspect-ratio:1; object-fit:cover; border-radius:20px; filter:saturate(.86) brightness(.94); animation:catYawn 2.2s ease-in-out infinite; }
.yawn-bubble { width:max-content; max-width:92%; margin:12px auto 10px; padding:10px 12px; border-radius:999px; background:rgba(209,160,91,.14); color:var(--cream); font-weight:900; animation:bubbleFloat 2.2s ease-in-out infinite; }
.target-phone p { margin:0; color:var(--muted); line-height:1.55; }
@keyframes catYawn { 0%,100% { transform:translateY(0) scale(1); } 45% { transform:translateY(-4px) scale(1.025); } }
@keyframes bubbleFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }

.toast { position:absolute; left:50%; bottom:28px; z-index:12; width:min(520px, calc(100vw - 48px)); transform:translateX(-50%); padding:12px 14px; border:1px solid rgba(209,160,91,.7); border-radius:16px; background:#202536; color:var(--cream); box-shadow:0 12px 36px rgba(0,0,0,.28); font-weight:900; text-align:center; }

button, .content-card, .blog-option, .room, .rank { transition:transform .12s ease, background .12s ease, border-color .12s ease; }
button:hover, .content-card:hover, .blog-option:hover, .room:hover, .rank:hover { transform:translateY(-1px); }
button:active, .content-card:active, .blog-option:active, .room:active, .rank:active { transform:translateY(1px) scale(.99); }
button:focus-visible, input:focus-visible, select:focus-visible { outline:3px solid var(--amber); outline-offset:3px; }

@media (max-width:980px) {
  body { overflow:auto; }
  .phone { height:auto; min-height:100vh; padding:14px 14px 28px; }
  .hud-panel { grid-template-columns:52px 1fr auto; }
  .hud-panel .tabbar { grid-column:1 / -1; order:4; }
  .screen { height:auto; min-height:calc(100vh - 174px); }
  .screen[data-screen="home"].active { grid-template-columns:1fr; grid-template-areas:"title" "goal" "status" "rooms" "next" "insights"; }
  .timer-card { min-height:auto; grid-template-rows:auto auto; }
  .home-feature { max-height:none; aspect-ratio:16/9; }
  .goal-content { grid-template-columns:112px 1fr; padding:14px; }
  .timer-ring { width:112px; height:112px; }
  .timer-core { width:74px; height:74px; }
  .timer-core strong { font-size:24px; }
  .timer-copy h3 { font-size:21px; }
  .rooms { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; }
  .room { flex:0 0 calc((100% - 8px) / 2); scroll-snap-align:start; }
  .insight-grid, .content-list, .blog-select { grid-template-columns:1fr; }
  .theme-row { grid-template-columns:repeat(3,1fr); }
  .overlay { inset:86px 14px 92px; }
}